<template>
    <div class="header">
        <van-icon name="wap-home-o" @click="toHome" />
        <div class="title">{{ name }}</div>
        <div class="icon">
            <van-icon name="search" class="icon_search" />
            <van-icon name="shopping-cart-o" @click="toCard" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
    name: {
        default: () => {
            return '网易严选'
        }
    }
})
// 跳转首页
const toHome = () => {
    router.push('/home')
}
// 跳转购物车
const toCard = () => {
    router.push('/card')
}
</script>

<style scoped lang="less">
.header {
    background-color: #fafafa;
    width: 355px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    .title {
        font-size: 18px;
        flex: 1;
        padding-left: 50px;
        text-align: center;
    }

    .icon {
        margin-right: 5px;

        .icon_search {
            padding: 15px;
        }
    }
}
</style>